<template>
	<div class="stream-area">
		<div class="video-stream">
			<video-component></video-component>
			<video-detail-component></video-detail-component>
		</div>
		<div class="chat-stream">
			<chat-component></chat-component>
			<chat-vip-component></chat-vip-component>
		</div>
	</div>
</template>

<script>
import VideoComponent from '@/components/tending/VideoComponent';
import VideoDetailComponent from '@/components/tending/VideoDetailComponent';
import ChatComponent from '@/components/tending/ChatComponent';
import ChatVipComponent from '@/components/tending/ChatVipComponent';
	
export default {
	name: 'TendingView',
	components: {VideoComponent, VideoDetailComponent, ChatComponent, ChatVipComponent},
}
</script>

<style scoped lang="scss">
.stream-area {
	display: flex;
	.video-stream {
		width: 65%;
		object-fit: cover;
		transition: .3s;
	}
	.chat-stream {
		flex-grow: 1;
		margin-left: 30px;
	}
}

@media screen and (max-width: 900px) {
	.stream-area {
		flex-direction: column;
		.video-stream {
			width: 100%;
		}
		.chat-stream {
			margin-left: 0;
			margin-top: 30px;
			width: 100%;
		}
	}
}
</style>